<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS复合选择器</title>
    <style>
        /* 1、后代选择器 */
        .box .pp span{
            color: red;
        }
        /* 2、子元素（子代）选择器 */
        .box > span{
            color: pink;
        }
        .box2{
            color: aqua;
            font-size: 50px;            
        }
        div.box2{
            background-color: bisque;
        }
        div.box3{
            background-color: greenyellow;
        }
        /* 3、并集选择器 */
        .box4,h2,#p{
            color: blueviolet;
            font-size: 50px;
        }
        /* 相邻选择器 */
        div+p{
            color: red;
        }
        /* 链接伪类选择器 */
        .lj1{
            color: pink;
            text-decoration: none;
        }
        /* 鼠标经过 */
        .lj1:hover{
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">
        <p class="pp">
            <span>文字</span>
        </p>
        <span>我嘞个骚刚</span>
    </div>
    <span>小猫老弟</span>
    <div class="box2">修购</div>
    <div>跑后厨</div>
    <h2 class="box3">偷吃</h2>
    <p>吃爽了</p>
    <!-- 并集选择器 -->
     <div class="box4">天王盖地虎</div>
     <h2>宝塔镇河妖</h2>
     <p id="p">叫什么名字</p>
     <!-- 相邻选择器 -->
    <div class="">12345</div>
    <p>老虎</p>
    <p>老虎没大招</p>
    <h3>松鼠</h3>
    <span>药药切克闹</span>
    <!-- 链接伪类选择器 -->
    <a href="#" class="lj1">链接</a>
</body>
</html>